<style rel="stylesheet/scss" lang="scss" scoped>
	.el-merchant-box {
        width: 100%;
        height: 825px;
        padding: 20px;
        overflow: auto;
        box-sizing: border-box;
        .box-flex {
            display: flex;
            margin-bottom: 10px;
        }
        .w-span {
            min-width: 100px;
            line-height: 40px;
            display: inline-block;
        }
        .l-radio {
            line-height: 40px;
        }
        .pri-btn {
            margin: 0 auto;
        }
        .p-40 {
            padding-top: 10px;
        }
        .m-l-60 {
            padding-left: 150px;
        }
		.otherInput{
			width: 150px;
			border-radius: 4px;
			padding: 0 15px;
			height: 40px;
			line-height: 40px;
			border: 1px solid #dcdfe6;
		}
    }
</style>
<template>
	<div class="el-merchant-box">
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">首页样式</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<el-radio label="1" class="l-radio" v-model="info.indexStyle">简单版本(力士)</el-radio>
				<el-radio label="2" class="l-radio" v-model="info.indexStyle">多功能版本(全德式)</el-radio>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">C端入口</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">小程序</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.miniProgram" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">微信号H5</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.weixinWeb" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">商城功能</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">在线商城</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.onlineStore" active-color="#13ce66" inactive-color="#ff4949" @change="basicFn($event)">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">会员等级价</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.memberLevelPrice" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span"></span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">挂单下单</span>
			</el-col>
			<el-col :span="1" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.paidAccount" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">零件号查询功能</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">零件号查询</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.oemSearch" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">商品适配车型</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.commodityModel" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">会员权限</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">会员注册审核</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.memberRegistry" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">禁止游客访问</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.avoidVisitor" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">VIN查询</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">开启VIN查询</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.vinSearch" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">日查询数</span>
			</el-col>
			<el-col :span="4" class="box-flex m-l-10 ">
				<el-input type="number" v-model="info.vinSearchDailyCount" />
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10"></el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">开启收费数据</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.vinSearchFee" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">默认查询次数</span>
			</el-col>
			<el-col :span="4" class="box-flex m-l-10 ">
				<!-- <el-input v-model="info.vinSearchDailyDefault " disabled="disabled" v-if="disFlag" @keyup="value=value.replace(/[^\d]/g,'')" /> -->
				<input v-model="info.vinSearchCount " class="otherInput" @keyup="defaultNumFn" />
			</el-col>
		</el-row>
		<el-row class=" box-flex">
			<el-col :span="4" class="box-flex m-l-10">
				<span class="w-span">其他功能</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">维护保养</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.maintain" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10">
				<span class="w-span">在线客服</span>
			</el-col>
			<el-col :span="3" class="box-flex m-l-10 p-40">
				<el-switch v-model="info.customer" active-color="#13ce66" inactive-color="#ff4949">
				</el-switch>
			</el-col>
		</el-row>
		<el-row class="box-flex m-l-60">
			<el-col :span="8" class="box-flex m-l-10">
				<span class="w-span">服务到期</span>
				<!-- <el-date-picker type="date" placeholder="选择日期" v-model="info.expireTime"> </el-date-picker> -->
				<el-date-picker v-model="info.expireTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
				</el-date-picker>
			</el-col>
		</el-row>
		<el-row class="box-flex m-l-60">
			<el-col :span="7" class="box-flex m-l-10">
				<span class="w-span">品类</span>
				<el-tree :data="cateTree" show-checkbox accordion node-key="categoryId" :indent="25" :default-checked-keys="catIds"
				 @check-change="handleCheckChange">
				</el-tree>
			</el-col>
		</el-row>
		<el-row class="box-flex">
			<!--<el-button type="primary" class="pri-btn" @click="subSerInfo">保存</el-button>-->
		</el-row>
		{{info.expireTime}}
	</div>
</template>
<script>
	export default {
		props: {
			merchantInfo: {
				type: Object,
				default: {}
			},
			cartIdList: {
				type: Array,
				default: []
			},
			merchantId: {
				type: [String, Number],
				default: ''
			}

		},
		data() {
			return {
				info: {
					indexStyle: '1',
					miniProgram: false,
					weixinWeb: false,
					onlineStore: false,
					memberLevelPrice: false,
					oemSearch: false,
					commodityModel: false,
					memberRegistry: false,
					avoidVisitor: false,
					vinSearch: false,
					vinSearchDailyCount: 0,
					maintain: false,
					customer: false,
					expireTime: '',
					vinSearchCount: 0,
					vinSearchFee: true,
					paidAccount: false,
				},
				disFlag: false,
				catIds: [],
				cateTree: null,
				pickerOptions1: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				}
			}
		},
		created() {
			if (this.cartIdList && this.cartIdList.length > 0) {
				this.cartIdList.forEach((item) => {
					this.catIds.push(item.categoryId)
				})
			}

			this._initTree()
		},
		methods: {
			basicFn(e) {
				console.log(e)
				if (!e) {
					this.info.paidAccount = false
				}
			},
			defaultNumFn(e) { 
				let value = e.srcElement.value
				this.info.vinSearchCount = value.replace(/[^\d]/g, '')
				return e.srcElement.value = value.replace(/[^\d]/g, '')
			},
			subSerInfo() {
				this.$emit('subSerInfo', this.info, this.catIds)
			},
			_initTree() {

				this.$get({
					url: 'category/',
					callback: result => {
						console.log(result)

						if (result.status !== 200) {
							this.$message({
								type: 'error',
								message: result.msg
							})
						}
						result.data.forEach((item) => {
							item.label = item.categoryName
							item.children.forEach((child) => {
								child.label = child.categoryName
								child.categoryId = child.id
							})
						})
						this.cateTree = result.data
						console.log(this.cateTree)

					}
				})
				//              this.$ajax({
				//                  api: 'category/querytree',
				//                  params: {}
				//              }).then(res => {
				//
				//                  console.log(res)
				//                  if (res.status == 200) {
				//                      this.cateTree = res.data.children
				//                  }
				//              }).catch(err => {
				//                  console.log(err)
				//              })
				console.log(this.merchantInfo)
				console.log('商家信息')
				if (this.merchantInfo && this.merchantInfo.account) {
					this.info.indexStyle = this.merchantInfo.indexStyle ? this.merchantInfo.indexStyle+'' : '1'
					this.info.miniProgram = this.merchantInfo.miniProgram ? true: false
					this.info.weixinWeb = this.merchantInfo.weixinWeb ? true : false
					this.info.onlineStore = this.merchantInfo.onlineStore ? true : false
					this.info.memberLevelPrice = this.merchantInfo.memberLevelPrice ? true : false
					this.info.oemSearch = this.merchantInfo.oemSearch ? true : false
					this.info.commodityModel = this.merchantInfo.commodityModel ? true : false
					this.info.memberRegistry = this.merchantInfo.memberRegistry ? true : false
					this.info.avoidVisitor = this.merchantInfo.avoidVisitor ? true : false
					this.info.vinSearch = this.merchantInfo.vinSearch ? true : false
					this.info.vinSearchDailyCount = this.merchantInfo.vinSearchDailyCount
					this.info.maintain = this.merchantInfo.maintain ? true : false
					this.info.customer = this.merchantInfo.customer ? true : false
					this.info.expireTime = this.merchantInfo.expireTime
					this.info.vinSearchCount = this.merchantInfo.vinSearchCount
					this.info.vinSearchFee = this.merchantInfo.vinSearchFee ? true : false
					if (this.info.onlineStore) {
						this.info.paidAccount = this.merchantInfo.paidAccount ? true : false
					} else {
						this.info.paidAccount = false
					}

					this.disFlag = this.info.vinSearchCount ? true : false

				}
			},
			handleCheckChange: function(data, checked, indeterminate) {
				console.log(data, checked, indeterminate)
				if (data.categoryLevel == 2) {
					var i = this.catIds.indexOf(data.id);

					if (checked) {
						if (i == -1) this.catIds.push(data.id);
					} else {
						if (i != -1) this.catIds.splice(i, 1);
					}
				} else if (!indeterminate) {
					
					var children = data.children;
					console.log(children)
					if (checked) {
						for (var i = 0; i < children.length; i++) {
							if (this.catIds.indexOf(children[i].id) == -1) this.catIds.push(children[i].id);
						}
					} else {
						for (var i = 0; i < children.length; i++) {
							var j = this.catIds.indexOf(children[i].id);
							if (j != -1) this.catIds.splice(j, 1);
						}
					}
				}
				console.log(this.catIds)
			},
		}

	}
</script>
